{% include 'head.html' %}


<script src="{{ url_for('static', filename='js/fbuploadimg.js') }}" rel="stylesheet"></script>
<body>





  <!-- 最为层容器 -->
  <div class="jd_container">

     <!-- 顶部 -->
    <div class="jd_header" style="height: 50px;background: #dce2ec;width: 100%">

      <!--<span style="float: left;margin-left: -18%;margin-top: 15px;">货比三家</span>-->
      <a onclick="window.history.back();" >
        <div style="width: 10%;margin-left: -20%;">
        <span style="float: left;margin-top: 12px;font-size: 23px;color: #000;">
          <i class="fa fa-chevron-left">
          </i>
        </span>
        </div>
      </a>
      
      <div style="text-align:center;margin-top: 5%;float: left;width: 90%;">
        <span style="font-size: 19px;"><b>发布{{ titleinfo }}</b></span>
      </div>

      <a onclick="window.history.back();" >
        <div style="margin-right: -15%;float: right;margin-top: 12px;">
        <span style="font-size: 23px;color: #000;top:0;">
          <i class="fa fa-question-circle">
          </i>
        </span>
      </div>
      </a>

    

    </div>


    <!-- 导航栏 -->
    <div class="jd_nav" style="background-color: #fff;">

      <div style="text-align:center;margin-top: 25%;margin-bottom: 10%;">
        <h4>标题</h4>
        <input id="infotitle" type="text" style="width: 80%;height: 35px;" placeholder="请输入标题">  
      </div>

    </div>

   

<div style="text-align:center;margin-top: 10%;">
  <h4>输入内容</h4>
  <textarea id="infomain" style="width: 80%;" rows="5"></textarea>
</div>

<hr style="margin-top: 10%;">



{% if mb2 %}
  <div style="text-align:center;">


  <div class="inner">

  <div class="problem">
    <div class="custom_img">
      <div class="custom_img_top">
        <p>请选择图片</p>
        <p><span class="upload_img_length">0</span>/2</p>
      </div>
      
      <!--点击上传图片 触发下面的div 点击事件-->
      <div class="upload_img_wrap">
        <div id="imgBox"></div>
        <img style="float: left;margin-top: 5px;" class="upload_img" data-id="1" src="http://hbsj.xyz/h5/upload_img.png" />
        <img style="display:none;float: left;margin-top: 5px;" class="upload_img" data-id="2" src="http://hbsj.xyz/h5/upload_img.png" />

      </div>
        
      <div style="display: none;width: 100%;height: 100vh;position: relative;">
        <form id="upBox" class="upload_form" action="" method="post" enctype="multipart/form-data">
          <div style="display: none;" id="inputBox">
            <input type="file" name="image[]" data-id="1" title="请选择图片" id="file1" accept="image/*" />
            <input type="file" name="image[]" data-id="2" title="请选择图片" id="file2" accept="image/*" />

          </div>
          <input style="display:none" type="submit" id="sub" />
        </form>
      </div>



    </div>
    
  </div>
</div>


</div>


<script type="text/javascript">
  
  var imgNum = 0;
  $(".upload_img_wrap .upload_img").bind("click", function(ev) {
    //console.log(ev.currentTarget.dataset.id)
    var index = ev.currentTarget.dataset.id;
    var that = this;
    if(index == 1) {
      $("#file1").click();
      $("#file1").unbind().change(function(e) {
        var index = e.currentTarget.dataset.id;
        if($('#file').val() == '') {
          return false;
        }
        $(that).hide();
        var filePath = $(this).val();
        changeImg(e, filePath, index);
        
        imgNum++;
        if(imgNum<2){
          $(".upload_img").eq(1).show();
        }
        $(".upload_img_length").html(imgNum);
      })
    } 
    else if(index == 2) {
      $("#file2").click();
      $("#file2").unbind().change(function(e) {
        var index = e.currentTarget.dataset.id;
        if($('#file').val() == '') {
          return false;
        }
        var filePath = $(this).val();
        changeImg(e, filePath, index);
        $(that).hide();
        imgNum++;
        $(".upload_img_length").html(imgNum);
      })
    }
  })



  function getimgs(){
    var formdata = new FormData();

    var img1 = $('#file1').get(0).files[0];
    var img2 = $('#file2').get(0).files[0];

    //alert(img1);
    //alert(img2);

    formdata.append('img1',img1);
    formdata.append('img2',img2);
    formdata.append('img3',"isNull");
    formdata.append('img4',"isNull");

    console.log("getimgs() : "+formdata);

    return formdata;
  }


  function postinfodata(){
    var titleval = $("#infotitle").val();
    var mainval = $("#infomain").val();


    var postdatas = getimgs();
    //alert(postdatas)
    postdatas.append("title",titleval);
    postdatas.append("maindata",mainval);
    //sqtype
    postdatas.append("sqtype","{{sqtype}}");
    console.log("postdatas : "+postdatas);

    //post_api_ajax3(postdatas,"fabusetinfo",fabuset_show);
    $.ajax({
            url: api_path+"/fabusetinfo/2",
            type: 'post',
            cache: false,
            processData:false,
            contentType:false,
            data: postdatas,
            dataType:'JSON',
            success:function (datas) {
                //alert(datas);

                if(datas == 0){

                    webToast("上传的头像格式错误！","middle",3000);
                }
                else if(datas == 1){
                  webToast("发布成功","middle",2000);
                  window.location.href="/sq";
                }
                else if(datas == 2){

                webToast("异常请求，开发不易请勿破坏","middle",2000);
                window.location.href="/";
                }

            }
        });

  }




</script>

{% endif %}





{% if mb1 %}
  <div style="text-align:center;">
  
  <h4>请选择图片</h4>

    <div class="form-group" id="uploadForm" enctype='multipart/form-data' style="width: 100%;margin:2%;text-align:center;">
                <div class="fileinput fileinput-new" data-provides="fileinput"  id="exampleInputUpload">
                    <div class="fileinput-new thumbnail" style="width: 100%;height: auto;max-height:150px;">
                        <img id='picImg' style="width: 150%;height: auto;max-height: 140px;" src="http://hbsj.xyz/h5/noimage.png" alt="" />
                    </div>
                    <div class="fileinput-preview fileinput-exists thumbnail" style="max-width: 150%; max-height: 150px;"></div>
                    <div>
                        <span class="btn btn-primary btn-file" style="width: 60%;">
                            <span class="fileinput-new" >添加图片</span>
                            <span class="fileinput-exists">换一张</span>
                            <input type="file" id="picID" accept="image/*" mutiple="mutiple" capture="camera" />
                        </span>
                        <a href="javascript:;" class="btn btn-warning fileinput-exists" data-dismiss="fileinput" style="width: 60%;">移除</a>
                    </div>
                </div>
            </div>
  </div>


<script type="text/javascript">
    function getimgs(){
    var formdata = new FormData();

    var img1 = $('#picID').get(0).files[0];
    

    //alert(img1);
    //alert(img2);

    formdata.append('img1',img1);
    formdata.append('img2',"isNull");
    formdata.append('img3',"isNull");
    formdata.append('img4',"isNull");
    console.log("getimgs() : "+formdata);

    return formdata;
  }


  function postinfodata(){
    var titleval = $("#infotitle").val();
    var mainval = $("#infomain").val();


    var postdatas = getimgs();
    //alert(postdatas)
    postdatas.append("title",titleval);
    postdatas.append("maindata",mainval);
    postdatas.append("sqtype","{{sqtype}}");
    console.log("postdatas : "+postdatas);

    //post_api_ajax3(postdatas,"fabusetinfo",fabuset_show);
    $.ajax({
            url: api_path+"/fabusetinfo/1",
            type: 'post',
            cache: false,
            processData:false,
            contentType:false,
            data: postdatas,
            dataType:'JSON',
            success:function (datas) {
                //alert(datas);
                if(datas == 0){

                    webToast("上传的头像格式错误！","middle",3000);
                }
                else if(datas == 1){
                  webToast("发布成功","middle",2000);
                  window.location.href="/sq";
                }
                else if(datas == 2){

                webToast("异常请求，开发不易请勿破坏","middle",2000);
                window.location.href="/";
                }

            }
        });

  }



</script>

{% endif %}





{% if mb3 %}
  <div style="text-align:center;">


  <div class="inner">

  <div class="problem">
    <div class="custom_img">
      <div class="custom_img_top">
        <p>请选择图片</p>
        <p><span class="upload_img_length">0</span>/4</p>
      </div>
      
      <!--点击上传图片 触发下面的div 点击事件-->
      <div class="upload_img_wrap">
        <div id="imgBox"></div>
        <img style="float: left;margin-top: 5px;" class="upload_img" data-id="1" src="http://hbsj.xyz/h5/upload_img.png" />
        <img style="display:none;float: left;margin-top: 5px;" class="upload_img" data-id="2" src="http://hbsj.xyz/h5/upload_img.png" />
        <img style="display:none;float: left;margin-top: 5px;" class="upload_img" data-id="3" src="http://hbsj.xyz/h5/upload_img.png" />
      </div>
      <div class="upload_img_wrap">
        <img style="display:none;float: left;margin-top: 5px;" class="upload_img" data-id="4" src="http://hbsj.xyz/h5/upload_img.png" />
      </div>
        
      <div style="display: none;width: 100%;height: 100vh;position: relative;">
        <form id="upBox" class="upload_form" action="" method="post" enctype="multipart/form-data">
          <div style="display: none;" id="inputBox">
            <input type="file" name="image[]" data-id="1" title="请选择图片" id="file1" accept="image/*" />
            <input type="file" name="image[]" data-id="2" title="请选择图片" id="file2" accept="image/*" />
            <input type="file" name="image[]" data-id="3" title="请选择图片" id="file3" accept="image/*" />
            <input type="file" name="image[]" data-id="4" title="请选择图片" id="file4" accept="image/*" /> 点击选择图片
          </div>
          <input style="display:none" type="submit" id="sub" />
        </form>
      </div>



    </div>
    
  </div>
</div>


</div>


<script type="text/javascript">
  
  var imgNum = 0;
  $(".upload_img_wrap .upload_img").bind("click", function(ev) {
    //console.log(ev.currentTarget.dataset.id)
    var index = ev.currentTarget.dataset.id;
    var that = this;
    if(index == 1) {
      $("#file1").click();
      $("#file1").unbind().change(function(e) {
        var index = e.currentTarget.dataset.id;
        if($('#file').val() == '') {
          return false;
        }
        $(that).hide();
        var filePath = $(this).val();
        changeImg(e, filePath, index);
        
        imgNum++;
        if(imgNum<4){
          $(".upload_img").eq(1).show();
        }
        $(".upload_img_length").html(imgNum);
      })
    } else if(index == 2) {
      $("#file2").click();
      $("#file2").unbind().change(function(e) {
        var index = e.currentTarget.dataset.id;
        if($('#file').val() == '') {
          return false;
        }
        $(that).hide();
        var filePath = $(this).val();
        changeImg(e, filePath, index);
        
        imgNum++;
        if(imgNum<4){
          $(".upload_img").eq(2).show();
        }
        $(".upload_img_length").html(imgNum);
      })
    } else if(index == 3) {
      $("#file3").click();
      $("#file3").unbind().change(function(e) {
        var index = e.currentTarget.dataset.id;
        if($('#file').val() == '') {
          return false;
        }
        var filePath = $(this).val();
        changeImg(e, filePath, index);
        $(that).hide();
        imgNum++;
        if(imgNum<4){
          $(".upload_img").eq(3).show();
        }
        $(".upload_img_length").html(imgNum);
      })
    }
    else if(index == 4) {
      $("#file4").click();
      $("#file4").unbind().change(function(e) {
        var index = e.currentTarget.dataset.id;
        if($('#file').val() == '') {
          return false;
        }
        var filePath = $(this).val();
        changeImg(e, filePath, index);
        $(that).hide();
        imgNum++;
        $(".upload_img_length").html(imgNum);
      })
    }
  })



 function getimgs(){
    var formdata = new FormData();

    var img1 = $('#file1').get(0).files[0];
    var img2 = $('#file2').get(0).files[0];
    var img3 = $('#file3').get(0).files[0];
    var img4 = $('#file4').get(0).files[0];
    //alert(img1);
    //alert(img2);

    formdata.append('img1',img1);
    formdata.append('img2',img2);
    formdata.append('img3',img3);
    formdata.append('img4',img4);

    console.log("getimgs() : "+formdata);

    return formdata;
  }


  function postinfodata(){
    var titleval = $("#infotitle").val();
    var mainval = $("#infomain").val();


    var postdatas = getimgs();
    //alert(postdatas)
    postdatas.append("title",titleval);
    postdatas.append("maindata",mainval);
    postdatas.append("sqtype","{{sqtype}}");
    console.log("postdatas : "+postdatas);

    //post_api_ajax3(postdatas,"fabusetinfo",fabuset_show);
    $.ajax({
            url: api_path+"/fabusetinfo/4",
            type: 'post',
            cache: false,
            processData:false,
            contentType:false,
            data: postdatas,
            dataType:'JSON',
            success:function (datas) {
                //alert(datas);
                if(datas == 0){

                    webToast("上传的头像格式错误！","middle",3000);
                }
                else if(datas == 1){
                  webToast("发布成功","middle",2000);
                  window.location.href="/sq";
                }
                else if(datas == 2){

                webToast("异常请求，开发不易请勿破坏","middle",2000);
                window.location.href="/";
                }

            }
        });

  }


</script>

{% endif %}









{% if mb4 %}
  <div style="text-align:center;">
    <h4 style="color: red;">对不起，发布视频暂未开放。</h4>
  </div>
{% endif %}






<br>
<div style="text-align:center;margin-top: 10%;float: left;width: 100%;">
  <hr style="margin-top: 10%;">
  <a onclick="postinfodata();" style="width: 60%;" class="btn btn-large btn-primary disabled">确认发布</a>
</div>

<hr style="margin-top: 10%;">
  <br>

    <!-- 京东内容区域 -->
    <div class="jd_mian" id="container" style="text-align:center;margin-top: 20%;height:200px;float: left;">
      <div class="main_content" style="background-color: #edf4ff;">
        

      </div>
    </div>


    

  </div>


{% include 'js.html' %}
<script>
  

  function changeImg(e, filePath, index) {
    fileFormat = filePath.substring(filePath.lastIndexOf(".")).toLowerCase();
    //检查后缀名
    if(!fileFormat.match(/.png|.jpg|.jpeg/)) {
      showError('文件格式必须为：png/jpg/jpeg');
      return;
    }
    //获取并记录图片的base64编码
    var reader = new FileReader();
    reader.readAsDataURL(e.target.files[0]);
    reader.onloadend = function() {
      // 图片的 base64 格式, 可以直接当成 img 的 src 属性值        
      var dataURL = reader.result;
      // console.log(dataURL)
      // 显示图片
      $("#imgBox").html($("#imgBox").html() + '<div class="imgContainer" data-index=' + index + '><img   src=' + dataURL + ' onclick="imgDisplay(this)"><img onclick="removeImg(this,' + index + ')"  class="imgDelete" src="http://hbsj.xyz/h5/del_img.png" /></div>');
    };

  }

  function removeImg(obj, index) {
    for(var i = 0; i < $(".imgContainer").length; i++) {
      if($(".imgContainer").eq(i).attr("data-index") == index) {
        $(".imgContainer").eq(i).remove();
      }
    }
    for(var i = 0; i < $(".upload_img").length; i++) {
      $(".upload_img").eq(i).hide();
      if($(".upload_img").eq(i).attr("data-id") == index) {
        console.log($(".upload_img").eq(i).attr("data-id"))
        $(".upload_img").eq(i).show();
      }
    }
    imgNum--;
    $(".upload_img_length").html(imgNum);
  }
  
  
  function imgDisplay(obj) {
    var src = $(obj).attr("src");
    var imgHtml = '<div style="width: 100%;height: 100vh;overflow: auto;background: rgba(0,0,0,0.5);text-align: center;position: fixed;top: 0;left: 0;z-index: 1000;display: flex;justify-content: center;    align-items: center;"><img src=' + src + ' style="margin-top: 100px;width: 96%;margin-bottom: 100px;"><p style="font-size: 50px;position: fixed;top: 30px;right: 30px;color: white;cursor: pointer;" onclick="closePicture(this)">×</p></div>'
    $('body').append(imgHtml);
  }
  
  function closePicture(obj) {
    $(obj).parent("div").remove();
  }





  function fabuset_show(datas){
    alert(datas);
  }






</script>



